<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body class="login-container">
<div id="app">
    <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false">
        <span>我来啦!</span>
    </el-drawer>

</div>
</body>

<script>
    new Vue({
        el: '#app',
        created(){
            //设置全局的
            var instance = axios.create({
                timeout: 1000
                //headers: {'Content-Type': 'application/json;charset=utf-8'}
            });
            this.$axios = instance;
        },
        mounted(){
            //this.timer = setInterval(this.fleshList, 1000);
        },
        beforeDestroy() {

        },
        data() {
            return {
                $axios:{},
                loginForm: {
                    username: 'admin',
                    password: 'admin'
                },
                loading: false,
                passwordType: 'password',
                redirect: undefined
            }
        },
        methods:{
            showPwd() {
                if (this.passwordType === 'password') {
                    this.passwordType = ''
                } else {
                    this.passwordType = 'password'
                }
                this.$nextTick(() => {
                    this.$refs.password.focus()
                })
            },
            handleLogin() {
                // let there = this;
                // this.post("/user/login",this.loginForm,function (res) {
                //     if(200 === res.code){
                //         there.success("成功登录");
                //         setTimeout(function () {
                //             window.location.href='/main';
                //         },500)
                //     }else {
                //         this.error("登录失败")
                //     }
                // })
                let there = this;
                let param = "username="+this.loginForm.username+"&password="+this.loginForm.password;
                this.get("/user/login?"+param,function (res) {
                    if(200 === res.code){
                        there.success("成功登录");
                        setTimeout(function () {
                            window.location.href='/main';
                        },500)
                    }else if (401 === res.code){
                        there.success("权限不足");
                    }
                    else {
                        there.error(res.message)
                    }
                })
            },
            post(url,data,callback){
                this.$axios.post(url,{'mUser':data}).then(function (res) {
                    callback(res.data)
                }).catch(function (err) {
                    console.log(err);
                });
            },
            get(url,callback){
                this.$axios.get(url).then(function (res) {
                    callback(res.data)
                }).catch(function (err) {
                    console.log(err);
                });
            },
            error(mes){
                this.$message({
                    message: mes,
                    type: 'error'
                });
            },
            success(mes){
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            warn(mes){
                this.$message({
                    message: mes,
                    type: 'warn'
                });
            }
        }
    })
</script>

<style>
    .login-container {
        min-height: 100%;
        width: 100%;
        background-color: #2d3a4b;
        margin: 0;
        overflow: hidden;
    }
    .login-form {
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 160px 35px 0;
        margin: 0 auto;
        overflow: hidden;
    }

    .title-container {
        position: relative;
        color: whitesmoke;

    }
    .title {
        font-size: 26px;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
    }
</style>
</html>